<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>-王者荣耀-</title>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
  <script src="bootstrap/js/jquery.min.js"></script>
  <script src="./bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- 导航条组件 -->
 <div class="container">
  <div class="row">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
              <a class="navbar-brand" href="rob.html" target="_blank">客服</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                  <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                  <li><a href="#">公司简介</a></li>
                  <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li role="separator" class="divider"></li>
                          <li><a href="#">Separated link</a></li>
                          <li role="separator" class="divider"></li>
                          <li><a href="#">One more separated link</a></li>
                      </ul>
                  </li>
              </ul>
              <form class="navbar-form navbar-left">
                  <div class="form-group">
                      <input type="text" class="form-control" placeholder="搜索">
                  </div>
                  <button type="submit" class="btn btn-default">提交</button>
              </form>
              <ul class="nav navbar-nav navbar-right">
                  <li><a href="https://www.bilibili.com/" target="_blank">哔哩哔哩</a></li>
                  <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                          <li><a href="#">Action</a></li>
                          <li><a href="#">Another action</a></li>
                          <li><a href="#">Something else here</a></li>
                          <li role="separator" class="divider"></li>
                          <li><a href="#">Separated link</a></li>
                      </ul>
                  </li>
              </ul>
          </div>
          <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
  </nav>
 </div>
</div>
 
  <div class="container">
   <div class="row">
    <!-- 头部区域 -->
    <header class="col-md-2">
      <div class="logo"><a href="#">
        <img src="images/logo.png" alt="" class="hidden-xs"></a>
        <span class="visible-xs">阿里百秀</span>
      </div>
      <div class="nav">
        <ul>
          <li><a href="https://cn.bing.com/videos/trending?form=Z9LH1" class="glyphicon glyphicon-camera" target="_blank">生活馆</a></li>
          <li><a href="https://cn.bing.com/videos/search?q=%E8%87%AA%E7%84%B6%E6%B1%87&qs=n&form=QBVLPG&sp=-1&pq=%E8%87%AA%E7%84%B6%E6%B1%87&sc=1-3&sk=&cvid=F47BCC36E2314EA08EF7D2A4A32DD4AE" class="glyphicon glyphicon-picture" target="_blank">自然汇</a></li>
          <li><a href="https://tv.sohu.com/v/dXMvMjkwMTAxODkwLzgzMzM1NDk5LnNodG1s.html" class="glyphicon glyphicon-tree-deciduous" target="_blank">科技湖</a></li>
          <li><a href="https://news.sina.com.cn/" class="glyphicon glyphicon-film" target="_blank">奇趣事</a></li>
          <li><a href="https://www.meishij.net/" class="glyphicon glyphicon-apple" target="_blank">美食街</a></li>
        </ul>
      </div>
    </header>

    <!-- 文章模块 -->
    <article class="col-md-7">
      <!-- 新闻模块 -->
      <div class="news clearfix">
        <ul>
          <li>
            <a href="#">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                  <div class="item active">
                      <img src="upload/0001.jpg" alt="..." style="width: 100; height: 100%">
                      <div class="carousel-caption">
                          我是老李！！
                      </div>
                  </div>
                  <div class="item">
                      <img src="upload/0005.jpeg" alt="...">
                      <div class="carousel-caption">
                          阿里百秀！
                      </div>
                  </div>
                  <div class="item">
                      <img src="upload/0003.jpeg" alt="...">
                      <div class="carousel-caption">
                          大秀哥！！！
                      </div>
                  </div>
              </div>
          </div>
          <script>
              $('.carousel').carousel({
                  interval: 3000
              })
          </script>
          </a>
          </li>
          <li>
            <a href="https://www.zhihu.com/topic/20432313/intro" target="_blank">
              <img src="./upload/0002.jpg" alt="">
              <p>前方深渊，身后地狱</p>
            </a>
          </li>
          <li>
            <a href="https://v.qq.com/x/page/o0913i3iloe.html" target="_blank">
              <img src="./upload/0003.jpeg" alt="">
              <p>常山赵子龙在此！</p>
            </a>
          </li>
          <li>
            <a href="https://v.qq.com/x/page/g3280pi9w7q.html" target="_blank">
              <img src="./upload/0005.jpeg" alt="">
              <p>机你太美</p>
            </a>
          </li>
          <li>
            <a href="https://music.163.com/#/playlist?id=919939187" target="_blank">
              <img src="./upload/0004.jpg" alt="">
              <p>我是!!!</p>
            </a>
          </li>
        </ul>
      </div>
      <!-- 发表模块 -->
      <div class="publish">
        <div class="row">
          <div class="col-md-9">
            <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
            <p class="text-muted hidden-xs">alibaixiu 发布于 2000-11-23</p>
            <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
            <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span> </p>
          </div>
          <div class="col-md-3 hidden-xs hidden-sm">
            <img src="upload/1.jpg" alt="">
          </div>
        </div>
        <div class="row">
          <div class="col-md-9">
            <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
            <p class="text-muted hidden-xs">alibaixiu 发布于 2000-11-23</p>
            <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
            <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span> </p>
          </div>
          <div class="col-md-3 hidden-xs hidden-sm">
            <img src="upload/3.jpg" alt="">
          </div>
        </div>
        <div class="row">
          <div class="col-md-9">
            <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
            <p class="text-muted hidden-xs">alibaixiu 发布于 2000-11-23</p>
            <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
            <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span> </p>
          </div>
          <div class="col-md-3 hidden-xs hidden-sm">
            <img src="upload/2.jpg" alt="">
          </div>
        </div>
        <div class="row">
          <div class="col-md-9">
            <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
            <p class="text-muted hidden-xs">alibaixiu 发布于 2000-11-23</p>
            <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
            <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span> </p>
          </div>
          <div class="col-md-3 hidden-xs hidden-sm">
            <img src="upload/3.jpg" alt="">
          </div>
        </div>
        <div class="row">
          <div class="col-md-9">
            <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
            <p class="text-muted hidden-xs">alibaixiu 发布于 2000-11-23</p>
            <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
            <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span> </p>
          </div>
          <div class="col-md-3 hidden-xs hidden-sm">
            <img src="upload/4.jpg" alt="">
          </div>
        </div>
        <div class="row">
          <div class="col-md-9">
            <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
            <p class="text-muted hidden-xs">alibaixiu 发布于 2000-11-23</p>
            <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
            <p class="text-muted">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span> </p>
          </div>
          <div class="col-md-3 hidden-xs hidden-sm">
            <img src="upload/1.jpg" alt="">
          </div>
        </div>
      </div>

       <!-- 分页码 -->
       <nav aria-label="Page navigation" style="margin-top: 10px; margin-left: 50%; transform: translateX(-50%);">
        <ul class="pagination">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
    <!-- 分页码 end-->
    </article>

    <!-- 最右侧模块 -->
    <aside class="col-md-3">
      <a href="https://zgboke.org/" target="_blank" class="banner">
        <img src="upload/zgboke.jpg" alt="">
      </a>
      <a href="https://top.baidu.com/board" target="_blank" class="hot">
        <span class="btn btn-primary">热搜</span>
        <h4 class="text-primary">欢迎加入中国博客联盟</h4>
        <p class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>
      </a>

        <!-- tab切换栏 -->
        <div style="margin-top: 10px;">
          <!-- Nav tabs -->
          <ul class="nav nav-tabs" role="tablist">
              <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">热搜</a></li>
              <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">冷知识</a></li>
              <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">排名</a></li>
              <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">随便</a></li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="home"><video src="video/redmi.mp4" autoplay="autoplay" controls="controls" muted="muted" loop="loop" style="width: 100%; height: 100%"></video></div>
              <div role="tabpanel" class="tab-pane" id="profile">冷知识</div>
              <div role="tabpanel" class="tab-pane" id="messages">排名</div>
              <div role="tabpanel" class="tab-pane" id="settings">22222333333333</div>
          </div>
      </div>
    </aside>
   </div>
  </div>

</body>
</html>